<template>
    <div class="container">
        <div class="filter_item price">
            <div class="filter_item_title">
                价格
                <span class="price">
                    0-{{ select_data.price }}
                </span>
            </div>
            <div class="price_slider">
                <el-slider
                    v-model="select_data.price"
                    :max="4000"
                    :show-tooltip="false"
                    @change="change_price_filter"
                />
            </div>
        </div>
        <div v-for="(item, index) in filter_list" :key="index" class="filter_item">
            <div class="filter_item_title">
                {{ item.title }}
            </div>
            <div class="filter_dropdown">
                <el-dropdown
                    :hide-on-click="true"
                    @command="handleCommand"
                >
                    <span class="el-dropdown-link">
                        <span>
                            {{ item.value | value_filter }}
                        </span>
                        <i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu
                        slot="dropdown"
                    >
                        <el-dropdown-item
                            v-for="(childItem, childIndex) in hotel_option[item.option_name]"
                            :key="childItem.id"
                            :command="{
                                optionName: item.option_name,index: index,
                                childIndex: childIndex,
                                name: childItem.name
                            }"
                        >
                            <svg class="icon" aria-hidden="true">
                                <use v-if="childItem.select" xlink:href="#icon-xuanzhong" />
                                <use v-else xlink:href="#icon-xuanzhongyuandian" />
                            </svg>
                            {{ childItem.name }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div class="repeal_btn">
            <el-button
                type="primary"
                @click="repeal_filter"
            >
                撤销条件
            </el-button>
        </div>
    </div>
</template>

<script>
    export default {
        filters: {
            value_filter (val) {
                if (val.length === 0) {
                    return "不限";
                }
                if (val.length === 1) {
                    return val[0];
                }
                return `已选${val.length}项`;
            }
        },
        data () {
            return {
                select_data: {
                    price: 4000
                },
                hotel_option: {

                },
                filter_list: [
                    {
                        title: "住宿等级",
                        value: [],
                        option_name: "levels"
                    },
                    {
                        title: "住宿类型",
                        value: [],
                        option_name: "types"
                    },
                    {
                        title: "酒店设施",
                        value: [],
                        option_name: "assets"
                    },
                    {
                        title: "酒店品牌",
                        value: [],
                        option_name: "brands"
                    }
                ],
                filter_name_correspondence: {
                    levels: "hotellevel",
                    types: "hoteltype",
                    assets: "hotelbrand",
                    brands: "hotelasset"
                }
            };
        },
        watch: {
            filter_list: {
                deep: true,
                handler (newV) {
                    const filterData = {
                        hotellevel: [],
                        hoteltype: [],
                        hotelbrand: [],
                        hotelasset: []
                    };
                    newV.forEach((element) => {
                        const filterName = this.filter_name_correspondence[element.option_name];
                        element.value.forEach((elementElement) => {
                            this.hotel_option[element.option_name].forEach((optionElement) => {
                                if (elementElement === optionElement.name) {
                                    filterData[filterName].push(optionElement.id);
                                }
                            });
                        });
                    });
                    this.$emit("change_detail_filter", filterData);
                }
            }
        },
        async created () {
            const res = await this.$axios.get("/hotels/options");
            this.hotel_option = res.data.data;
            for (const key in this.hotel_option) {
                if (this.hotel_option[key]) {
                    const element = this.hotel_option[key];
                    element.forEach((childElement) => {
                        childElement.select = false;
                    });
                }
            }
        },
        methods: {
            change_price_filter (val) {
                this.$emit("change_price_filter", val);
            },
            handleCommand (command) {
                const { optionName, index, childIndex, name } = command;
                const hasMark = this.filter_list[index].value.indexOf(name);
                if (hasMark === -1) {
                    this.filter_list[index].value.push(name);
                } else {
                    this.filter_list[index].value.splice(hasMark, 1);
                }
                this.hotel_option[optionName][childIndex].select = !this.hotel_option[optionName][childIndex].select;
            },
            repeal_filter () {
                this.select_data.price = 4000;
                this.filter_list.forEach((element) => {
                    element.value = [];
                });
            }
        }
    };
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 78px;
    padding: 5px 0px 5px 20px;
    border: 1px solid #ddd;
    display: flex;
    .filter_item {
        height: 100%;
        border-right: 1px solid #ddd;
        padding: 5px 20px;
        &.price {
            width: 160px;
        }
        .filter_item_title {
            font-size: 14px;
            color: #666;
            .price {
                float: right;
            }
        }
        .filter_dropdown {
            margin-top: 8px;
            .el-dropdown {
                width: 125px;
                .el-dropdown-link {
                    position: relative;
                    cursor: pointer;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    i {
                        float: right;
                        position: absolute;
                        bottom: 0;
                        right: 0;
                    }
                }
            }
        }
    }
    .repeal_btn {
        box-sizing: border-box;
        width: 154px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.icon {
    width: 14px;
    height: 14px;
}
</style>
